<template>
  <div class="search_more">
      <div class="wrap_search clearfix">
        <slot name="search"></slot>
        <div class="more_btn" v-if="isShowMoreBtn">
          <advancedSearch @search-more="searchMore" :searchData="moreSearch" ref="search"></advancedSearch>
        </div>
      </div>
      <div class="condition">
        <Condition :searchNow="true" @condition-label="initTags" :searchingData="moreSearch"></Condition>
      </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
import Condition from '@components/search/condition.vue'
import advancedSearch from '@components/search/QuickSearch.vue'
@Component({
  name: 'MoreSearchCom',
  components: {
    advancedSearch,
    Condition
  }
})
export default class MoreSearchCom extends Vue {
  @Prop() private searchData!: any
  @Prop() private formData!: any
  @Prop({ default: true }) private isShowMoreBtn!: any
  private form: any = {}
  private moreSearch: object[] = []

  private beforeMount () {
    this.moreSearch = JSON.parse(JSON.stringify(this.searchData))
    this.form = JSON.parse(JSON.stringify(this.formData))
  }

  @Emit()
  private searchList () {
    const data: any = {}
    for (const key in this.form) {
      if (this.form[key]) {
        data[key] = this.form[key]
      }
    }
    return data
  }

  private initTags (val: any) {
    if (val === 'clear') {
      this.clearCondition()
      this.searchList()
    } else {
      this.restSearchingData(val)
    }
  }

  private restSearchingData (val: any) {
    if (val.length) {
      this.clearFormAdva()
      const moreSearches = this.moreSearch
      for (let i = 0; i < val.length; i++) {
        const item = val[i]
        this.form[item.model] = item[item.model]
        for (let j = 0; j < moreSearches.length; j++) {
          const element: any = moreSearches[j]
          if (item.model === element.model && item.type === 'location') {
            element.city = item.city
            element.province = item.province
            this.form.city = item.city
            this.form.province = item.province
          } else if (item.model === element.model) {
            element[element.model] = item[item.model]
          }
        }
      }
      this.searchList()
    } else {
      this.clearCondition()
      this.searchList()
    }
  }

  private clearCondition () {
    const moreSearches = this.moreSearch
    for (let i = 0; i < moreSearches.length; i++) {
      const element: any = moreSearches[i]
      if (element.model === 'platform') {
        element[element.model] = 'ALI_CLOUD'
        this.form[element.model] = 'ALI_CLOUD'
      } else if (element.type === 'location') {
        element.city = ''
        element.province = ''
        this.form.province = ''
        this.form.city = ''
      } else {
        element[element.model] = ''
        this.form[element.model] = ''
      }
    }
  }

  // 清空更多搜素绑定的form值
  private clearFormAdva () {
    const moreSearches = this.moreSearch
    this.form.province = ''
    this.form.city = ''
    for (let i = 0; i < moreSearches.length; i++) {
      const element: any = moreSearches[i]
      if (element.model === 'platform') {
        this.form[element.model] = 'ALI_CLOUD'
      } else {
        this.form[element.model] = ''
      }
    }
  }

  private searchMore (val: any) {
    this.clearFormAdva()
    val.map((item: any) => {
      if (item[item.model]) {
        this.form[item.model] = item[item.model]
      } else if (item.province) {
        this.form.province = item.province
        this.form.city = item.city
      }
    })
    this.searchList()
    this.moreSearch = val
  }

  private searchClick (id: string, val: string) {
    this.clearFormAdva()
    this.clearCondition()
    this.form[id] = val
    this.searchList()
  }
}
</script>
<style lang="stylus" scoped>
  .search_more
    .wrap_search
      position relative
      .more_btn
        position absolute
        right 0px
        top 6px
</style>
